<style>
  /* “上传政策文件”按钮直接在标签里设置了 */

  .ivu-icon-ios-cloud-upload-outline:before {
    /* 上传政策文件里的icon */
    content: "\f182";
    font-size: 20px;
    font-weight: 700;
    color: #08023c;
  }

  .ivu-btn-error {
    /* 删除文件按钮 */
    color: #fff;
    background-color: #ed4014 !important;
    border-color: #ed4014;
  }
</style>

<div id="institution">
  <Card
    style="
      margin: 30px 30x 0 30px;
      padding: 20px 60px;
      height: calc(100vh - 100px);
      overflow-y: scroll;
    "
  >
    <Modal v-model="showModal" width="360">
      <p slot="header" style="color: #f60; text-align: center">
        <i class="ivu-icon ivu-icon-ios-information-circle"></i>
        <span>提示</span>
      </p>
      <div style="text-align: center">
        <p>确定删除该文件？</p>
      </div>
      <div slot="footer">
        <i-button @click="showModal=false">取消</i-button>
        <i-button type="error" :loading="modal_loading" @click="deleteFile"
          >删除</i-button
        >
      </div>
    </Modal>
    <!-- action地址无实际意义，已拦截组件自动的提交 -->
    <Upload
      :before-upload="handleUpload"
      :show-upload-list="true"
      action="//jsonplaceholder.typicode.com/posts/"
      name="policyFile"
      :max-size="10000"
      :on-exceeded-size="outOfSize"
      accept=".pdf"
    >
      <i-button
        icon="ios-cloud-upload-outline"
        style="
          width: 200px;
          height: 45px;
          background-color: #63e4b4;
          color: #06034a;
          border: 3px solid #aee8fe;
          font-weight: 550;
        "
        >上传PDF政策文件</i-button
      >
    </Upload>
    <div v-if="file !== null">
      要上传的文件: {{ file.name }}
      <i-button type="success" @click="upload" :loading="loadingStatus"
        >{{ loadingStatus ? '上传中' : '点击开始上传' }}
      </i-button>
    </div>

    <div
      v-for="(item,index) of fileInfo"
      :key="item.id"
      style="padding-top: 25px"
    >
      <!-- href前一定要加冒号才能不是写死的形式，而是交给vue管理的动态值 -->
      <a :href="item.filePath" target="_blank">{{item.fileName}}</a>
      <div style="float: right">
        <i-button type="error" @click="pretreatmentDelete(index)"
          >删除文件</i-button
        >
      </div>

      <div style="float: right; padding: 2px 30px 0 0">
        上传时间：{{item.upload_time}}
      </div>
    </div>
  </Card>
</div>
<script>
  new Vue({
    el: "#institution",
    data: {
      // 控制模态窗
      showModal: false,
      // 存储文件
      file: null,
      // 控制上传加载状态
      loadingStatus: false,
      // 控制模态窗里的删除加载状态
      modal_loading: false,
      // 从后端获取到的文件信息放在这
      fileInfo: [],
      // 当前选中的文件信息的索引（下标）
      index: null,
    },
    methods: {
      // 删除提示预处理
      pretreatmentDelete(index) {
        this.showModal = true;
        //获取点击的索引值
        this.index = index;
        console.log(this.fileInfo[index]);
      },
      // 获取服务器中的文件信息
      getFileInfo() {
        var that = this;
        // 数组[]才有splice函数，对象没有
        that.fileInfo.splice(0, that.fileInfo.length); //清空数组
        that.$Loading.start();
        $.ajax({
          url: "http://3v.gsdse.cn/UEBIMP/public/index.php/index/PolicyFileInfo/getPolicyFileInfo",
          type: "POST",
          async: false,
          success(res) {
            if (res.error_code == 0) {
              that.fileInfo = res.data;
            } else if (res.error_code == 1) {
              that.$Message.warning({
                content: "暂无政策文件",
                duration: 2,
              });
              console.log(res.msg);
            }
          },
          error() {
            console.log("请求失败");
            that.$Message.error({
              content: "请求失败",
              duration: 2,
              background: true,
            });
          },
        }).then(function () {
          that.$forceUpdate();
          that.$Loading.finish();
        });
      },
      outOfSize() {
        this.$Message.warning({
          content: "文件大小不能超过10MB",
          background: true,
        });
      },
      // 自动提交拦截
      handleUpload(file) {
        console.log(file);
        this.file = file;
        return false;
      },
      // 手动提交
      upload() {
        this.loadingStatus = true;
        var that = this;
        let fileFormData = new FormData();
        fileFormData.append("policyFile", this.file);
        // let requestConfig = {
        //     headers: {
        //         'Content-Type': 'multipart/form-data'
        //     }
        // };
        $.ajax({
          url: "http://3v.gsdse.cn/UEBIMP/public/index.php/index/UploadFile/uploadPolicyFile",
          data: fileFormData,
          async: false,
          type: "POST",
          //ajax2.0可以不用设置请求头，但是jquery帮我们自动设置了，这样的话需要我们自己取消掉
          contentType: false,
          //取消帮我们格式化数据，是什么就是什么
          processData: false,
          success(res) {
            if (res.error_code == 0) {
              console.log(res);
              that.$Notice.success({
                title: res.msg,
              });
              that.getFileInfo;
            }
            if (res.error_code == 1) {
              that.$Notice.success({
                title: res.msg,
              });
            }
            if (res.error_code == 2) {
              that.$Notice.success({
                title: res.msg,
              });
            }
            if (res.error_code == 3) {
              that.$Notice.success({
                title: res.msg,
              });
            }
          },
          error() {
            that.$Message.error({
              content: "上传请求失败",
              duration: 3,
            });
          },
        }).then(function () {
          that.file = null;
          that.loadingStatus = false;
          that.getFileInfo();
        });
      },

      // 正式删除
      deleteFile() {
        var that = this;
        this.modal_loading = true;
        $.ajax({
          url: "http://3v.gsdse.cn/UEBIMP/public/index.php/index/PolicyFileInfo/deletePolicyFile",
          data: {
            id: that.fileInfo[that.index].id,
            fileName: that.fileInfo[that.index].fileName,
          },
          type: "POST",
          async: false,
          success(res) {
            if (res.error_code == 0) {
              that.$Notice.success({
                title: res.msg,
              });
            } else if (res.error_code == 1) {
              that.$Notice.warning({
                title: res.msg,
              });
            } else if (res.error_code == 2) {
              that.$Notice.error({
                title: res.msg,
              });
            }
          },
          error() {
            that.$Message.error({
              content: "删除请求失败",
              duration: 3,
            });
          },
        }).then(function () {
          that.showModal = false;
          that.modal_loading = false;
          that.getFileInfo();
        });
      },
    },
    mounted: function () {
      this.getFileInfo();
    },
  });
</script>
